<template>
  <header>
    <div style="width: 204px" class="header-region">
      <img alt="logo" class="logo" src="@/assets/u15.png" style="margin-right: 8px" />
      <div class="logo-text">城市地图</div>
    </div>
    <div class="header-region">
      <div class="link-text" @click="goPage('/')">首页</div>
      <div class="link-text" @click="goPage('/page01')">土地研判</div>
      <div class="link-text" @click="goPage('/page09')">围栏DEMO</div>
    </div>
  </header>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
// const route = useRoute();

function goPage(params) {
  router.push({
    path: params,
  });
}
</script>

<style scoped>
header {
  display: flex;
  height: 61px;
  background: rgba(206, 20, 29, 1);
}

.logo {
  width: 47px;
  height: 27px;
}
.logo-text {
  font-weight: 650;
  font-style: normal;
  font-size: 18px;
  color: #fff;
}

.header-region {
  display: flex;
  align-items: center;
  justify-content: center;
}
.link-text {
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #ffffff;
  text-align: left;
  line-height: 22px;
  margin-right: 12px;
}
.link-text:hover {
  cursor: pointer;
}
</style>
